<template>
  <div class="achieveBox">
    <fieldset class="row" v-for="(d,index) in data" :key="index">
      <legend style="text-align: center">{{d.name}}</legend>
      <div v-for="(item,index) in d.items" style="padding-bottom: 10px;">
        <li>{{item.name}}</li>
        <li>{{item.counts}}</li>
      </div>
    </fieldset>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      data:[
        {
          name:"区域成果",
          items:[
            {
              name:"进入社区",
              counts:246
            },
            {
              name:"进入学校",
              counts:122
            },
            {
              name:"进入家庭",
              counts:1623
            }
          ]
        },
        {
          name:"荣誉成果",
          items:[
            {
              name:"实践基地",
              counts:4
            },
            {
              name:"发表论文",
              counts:8
            },
            {
              name:"荣誉",
              counts:13
            }
          ]
        },
        {
          name:"团队成果",
          items:[
            {
              name:"红色实践",
              counts:168
            },
            {
              name:"培训教师",
              counts:1641
            },
            {
              name:"培训人才",
              counts:2671
            }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.achieveBox {
  display: flex;
  height: 30vh;
  .row {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: rgba(129, 0, 0, 0.8);
    border: 1px solid rgb(255, 0, 14);
    font-size: 20px;
    font-weight: 800;
    font-family: monospace;
    color: white;
    div li:nth-child(1),
    div li:nth-child(3),
    div li:nth-child(5) {
      // overflow: hidden; // 清除样式
      font-size: 14px;
      padding-top: 0.25rem;
      color: rgb(255, 227, 189);
    }
    div li:nth-child(2),
    div li:nth-child(4) {
      padding-top: 4px;
      font-size: 16px;
      color: rgb(253, 247, 141);
    }
    div li:nth-child(6) {
      padding-top: 16px;
      color: rgb(234, 130, 126);
      text-shadow: 0 0 10px rgb(234, 130, 126);
    }
  }
  .row:nth-child(1) {
    margin-right: 0.175rem;
  }
  .row:nth-child(2) {
    margin-right: 0.175rem;
  }
}
</style>
